<template>
  <div id="home">
    <nav-bar :title="'注册'" :back-to="'/login'" :left-text="'返回'" :is-arrow="true" />
    <van-form validate-first @failed="onFailed" @submit="onSubmit">
      <div class="form">
        <van-field
          v-model="resetForm.username"
          label="用户名"
          name="pattern"
          placeholder="请输入用户名"
          :rules="[{ pattern, message: '请输入5~10位' }]"
        >
          <template #left-icon>
            <i class="icon iconfont icon-zhanghu" />
          </template>
        </van-field>
        <van-field
          v-model="resetForm.phone"
          label="电话"
          name="validator"
          placeholder="请输入手机号"
          :rules="[{ validator, message: '请输入正确的手机号' }]"
          type="number"
        >
          <template #left-icon>
            <i class="icon iconfont icon-shoujihao" />
          </template>
        </van-field>
        <!-- <van-field
          v-model="resetForm.email"
          label="邮箱"
          name="validator"
          placeholder="请输入电子邮箱"
          :rules="[{ validatorPhone, message: '请输入正确的电子邮箱' }]"
          type="number"
        >
          <template #left-icon>
            <i class="icon iconfont icon-shoujihao" />
          </template>
        </van-field> -->
        <van-field
          v-model="resetForm.verificationCode"
          label="验证码"
          name="pattern"
          placeholder="请输入验证码"
          type="number"
        >
          <template #left-icon>
            <i class="icon iconfont icon-yanzhengma" />
          </template>
          <template #button>
            <van-button
              class="btn-code"
              size="small"
              type="info"
              :disabled="verificationCodeDisplay"
              @click="getVerificationCode()"
            >{{ codeBtnMsg }}</van-button>
          </template>
        </van-field>
        <van-field
          v-model="resetForm.password"
          label="密码"
          name="pattern"
          placeholder="请输入密码"
          :rules="[{ pattern, message: '请输入5~10位' }]"
          :type="passwordType?'password':'number'"
        >
          <template #left-icon>
            <i class="icon iconfont icon-mima" />
          </template>
          <template #right-icon>
            <i class="icon iconfont icon-yanjing" @click="passwordType=!passwordType" />
          </template>
        </van-field>
        <van-field
          v-model="resetForm.confirmPassword"
          label="确认密码"
          name="pattern"
          placeholder="请输入确认密码"
          :rules="[{ pattern, message: '请输入5~10位' }]"
          :type="nextPasswordType?'password':'number'"
        >
          <template #left-icon>
            <i class="icon iconfont icon-mima" />
          </template>
          <template #right-icon>
            <i class="icon iconfont icon-yanjing" @click="nextPasswordType=!nextPasswordType" />
          </template>
        </van-field>
        <div style="margin: 8rem 3rem;">
          <van-button block type="primary" native-type="submit">提交</van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>
<script>
import NavBar from '@/components/common/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      resetForm: {
        username: null,
        phone: null,
        email: null,
        verificationCode: null,
        password: null,
        confirmPassword: null
      },
      pattern: /^[\da-zA-Z!@#$%^&*]{5,10}$/,
      passwordType: false,
      nextPasswordType: false,
      verificationCodeDisplay: false,
      codeBtnMsg: '获取验证码'
    }
  },
  methods: {
    onSubmit() {},
    onFailed() {
      this.$notify({ type: 'warning', message: '请正确输入内容!' })
    },
    // 手机号码验证
    validator(val) {
      return /^[1][3,4,5,7,8][0-9]{9}$/.test(val)
    },
    getVerificationCode() {
      this.verificationCodeDisplay = true
      let count = 60
      const _time = setInterval(() => {
        this.codeBtnMsg = `${count--}s 后再试`
        if (count === 0) {
          clearInterval(_time)
          this.codeBtnMsg = ''
          this.verificationCodeDisplay = false
        }
      }, 1000)
    }
  }
}
</script>
<style scoped>
#home {
  margin-bottom: 5rem;
}
.btn-code {
  height: 1.9rem;
  letter-spacing: 0.1rem;
}
</style>
